<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" type="text" v-model="form.name" placeholder="姓名" placeholder-class="placeholder" />
		</view>


		<view class="row b-b">
			<text class="tit">收款类型</text>
			<input class="input" type="text" v-model="form.type" placeholder="工商银行/支付宝" placeholder-class="placeholder" />
		</view>

		<view class="row b-b">
			<text class="tit">卡号/账号</text>
			<radio-group class="uni-list" @change="rediochage">
				<label class="uni-list-cell uni-list-cell-pd" style="font-size: 24upx;" v-for="(item, index) in itemData" :key="index">
					<radio :id="item.value" style="transform:scale(0.7)" :value="item.value" :checked="item.value == form.ispic"></radio>
					<label class="label-2-text" :for="item.value">
						<text>{{ item.name }}</text>
					</label>
				</label>
			</radio-group>
		</view>


		<view class="picrow b-b" v-if="form.ispic ==1  ">
			
			<view class="photo_sign" @click="upload">
				<image src="../../static/icon/plus.png" v-model="form.picurl" mode="" class="photo_icon"></image>
				<view class="photo_text_b">上传图片</view>
				<view class="photo_text_s">仅支持JPG,PNG,JPEG</view>
				<view class="photo_text_s">BMP格式文件</view>
			</view>
			
			<view v-if="form.picurl">
				<image :src="getimg + form.picurl" class="tui-pro-img" style="height: 60vw;width: 46vw;"></image>
			</view>
		</view>

		<view class="row b-b" v-if="form.ispic ==0">
			<text class="tit">卡号/地址</text>
			<input class="input" type="text" v-model="form.accounts" placeholder="卡号/地址" placeholder-class="placeholder" />
		</view>


	<view class="row b-b">
			<text class="tit">支付密码</text>
			<input class="input" type="password" v-model="form.uZfPwd" placeholder="支付密码" placeholder-class="placeholder" />
		</view>


		<view class="btn">
			<button class="add-btn" v-if="type == 'edit'" @click="del">删除</button>
			<button class="add-btn" v-if="type == 'add'" @click="sub_add" :disabled="!cansubmit">提交</button>
			<button class="add-btn" v-if="type == 'edit'" @click="sub_edit">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				cansubmit:true,
				form: {
					name: '',
					type: '',
					accounts: '',
					picurl: '',
					ispic: 0,
					id: 0
				},
				getimg: this.$getimg,
				itemData: [
					{
						name: '卡号',
						value: '0'
					}
				]

			}
		},
		onLoad(option) {
			console.log(option)
			if (option.type == 'edit') {
				let cache = uni.getStorageSync('edit_data')
				this.form = cache
				this.type = 'edit'
				this.del_id = cache.id
			} else if (option.type == 'add') {
				this.type = 'add'
			}
		
		},

		onShow() {

		},
		methods: {
			del() {
				
				const data = this.form
				if (!data.uZfPwd) {
					this.$api.msg('请输入支付密码')
					return
				}
				
				
				var _self = this;
				uni.showModal({
					title: '提示',
					content: '是否删除？',
					success: function(res) {
						if (res.confirm) {
				
				_self.$api.http.post('assistance/accounts/del_accounts', {
					id: _self.form.id, uZfPwd:_self.form.uZfPwd
				}).then(res => {
					_self.$api.msg(res.msg);
					if (res.status == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
				
				}}})
				
				
				
			},


			sub_edit(id) {
				const that = this
				const data = this.form
				this.$api.http.post('/assistance/accounts/edit_accounts', data).then(res => {
					this.$api.msg(res.msg);
					if (res.status == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})

			},
			sub_add() {
				const data = this.form
				if (!data.name) {
					this.$api.msg('请输入姓名')
					return
				}
				if (!data.type) {
					this.$api.msg('请输入类型')
					return
				}

				if (data.ispic != 0) {
					this.$api.msg('请选择二维码/卡号'+data.ispic)
					return
				}


				if (!data.accounts && !data.picurl) {
					this.$api.msg('卡号地址不可为空')
					return
				}
				
				
				if (!data.uZfPwd) {
					this.$api.msg('请输入支付密码')
					return
				}
				
   this.cansubmit = false;

				this.$api.http.post('/assistance/accounts/add_accounts', data).then(res => {
					this.$api.msg(res.msg);
					if (res.status == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},

			upload: function() {
				var _self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 //'original',
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: _self.getimg + '/index/upload/uploadImgNoData',
							filePath: tempFilePaths[0],
							name: 'img',
							formData: {
								use: 'shoukuanimg',
								back: 'idurl'
							},
							success: uploadFileRes => {
								var res = JSON.parse(uploadFileRes.data);

								if (res.status == 200) {

									_self.$api.msg('上传成功');

									_self.form.picurl = res.data.url;

								} else _self.$api.msg(res.msg);
							}
						});

						/* uploadTask.onProgressUpdate(function (res) {
			 
				
			 }); */
					},
					error: function(e) {
						console.log(e);
					}
				});
			},


			rediochage(e) {
				this.form.ispic = e.detail.value;
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 150upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	
	.picrow {
		display: flex;
		align-items: center;
		position: relative;
		padding:30upx;
		height: auto;
		background: #fff;
		font-size: 30upx;
		
		}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.btn {

		display: flex;

		.add-btn {
			width: 47%;
			height: 80upx;
			margin: 60upx auto;
			font-size: $font-lg;
			color: #fff;
			background-color:#52a5f7;
			border-radius: 10upx;
			box-shadow: 1px 2px 5px rgba(60, 121, 182, 102);
		}
	}



	.tab {
		color: #f00;
		padding: 20upx 0;
		font-size: 32upx;
	}

	.tab.active {
		color: #999999;
	}

	.result {
		color: #999999;
		margin-right: 5%;
		width: 100%;
		font-size: 32upx;
	}



	.photo_sign {
		background-color: #fafafa;
		text-align: center;
		width: 240upx;
		height: 240upx;
		color: #dcdcdc;
        margin-right: 20upx;
		.photo_icon {
			width: 60upx;
			height: 60upx;
			margin: 26upx 0 10upx;
		}

		.photo_text_b {
			font-size: 18upx;
		}

		.photo_text_s {
			margin-top: 6upx;
			font-size: 16upx;
		}

		.photo_preview {
			width: 100%;
			height: 100%;
		}
	}
</style>
